<template>
  <div class="home">
    <div class="cover">
      <div class="heart">
        <svg
          viewBox="0 0 1000 1400"
          style="background-color:#ffffff00"
          xmlns="http://www.w3.org/2000/svg"
          width="100%"
          height="812"
        >
          <g stroke="#FFF" stroke-width="10" fill="none">
            <path
              d="M-.23 789.91l31.82 1.77 8.84 30.06 12.38-72.49 10.61 38.9,15.91,1.76,3.54,46,10.6-42.43,17.68-1.77,23-252.83,19.45,251.06,31.82-1.76L197.79,751,213.7,933.13l21.22-194.49,8.84,53H257.9l3.54,37.13,8.84-38.9H291.5l23,258.14,21.22-254.6h31.82L379.9,843l8.84-93.71,28.29,99,12.37-58.35,14.15,3.54,3.53-24.75,8.84,23h14.15l17.68,123.77,15.91-122h40.67L554.74,783,689.31,648.47S760,540.62,675.16,494.65c0,0-61.88-56.58-155.59,30.06,0,0-86.63-104.32-191-8.84,0,0-70.72,199.79,212.17,263.44l15.91,12.85,67.7-.95,13.83-64.84,13.35,61.5,18.11.47,11,47.2,8.1-45.76h8.11l7.15-40,20.92,182.51L742.56,756l9.12,32.2,37.67,1.22L812.29,549l22.94,238.75h17l11.89,119.8L876,792.84h17l10.19-32.29,7.65,29.74,13.59,1.7,5.95,51,18.69-172.48,19.55,169.93,10.19-50.13h38.23l19.55,252.34,20.39-254h21.24"
            />
          </g>
        </svg>
      </div>
    </div>
    <div class="stars">
      <div v-for="(item,index) in starCount" :key="index" ref="star" class="star"></div>
    </div>
    <div class="textAndTime">
      <div class="majorText" ref="majorText">
        <span>这是我们在一起的</span>
      </div>
      <div class="calculateTime">
        <span class="timeSpan" @click="toVisitor">{{calculateTime}}</span>
      </div>
    </div>
    <a href="https://gitee.com/sheng31/sheng31" class="copyright">&copy; shengshengsheng</a>
  </div>
</template>
<script>
import { SHA1 } from '../lib/SHA1.js'
export default {
  data () {
    return {
      starCount: 800,
      starDistance: 800,
      calculateTime: '',
      record: { ip: '', location: '', city: '', province: '', pointX: '', pointY: '', userAgent: '' },
      ak: 'bttjWDyfNVV7UIkSkz4KH7Fhpt91ys27'
    }
  },
  mounted () {
    window.sessionStorage.setItem('token', 'no')
    this.initStar()
    setInterval(this.getTime, 0)
    // 获取path长度
    // var path = document.querySelector('path')
    // var length = path.getTotalLength()
    // console.log(length)
    this.getIpData()
  },
  methods: {
    initStar () {
      const starArr = this.$refs.star
      starArr.forEach(item => {
        const speed = 0.2 + (Math.random() * 1)
        const distance = this.starDistance + (Math.random() * 300)
        item.style.transformOrigin = `0 0 ${distance}px`
        item.style.transform = `translate3d(0,0,-${distance}px) rotateY(${(Math.random() * 360)}deg) rotateX(${(Math.random() * -50)}deg) scale(${speed},${speed})`
      })
    },
    getTime () {
      const startTime = new Date('2017/5/28 13:14:20')
      const date = new Date()
      const time = Math.floor((date - startTime) / 1000) // 经过的秒数
      const days = Math.floor(time / (3600 * 24))
      let hours = Math.floor((time % (3600 * 24)) / (60 * 60))
      if (hours < 10) {
        hours = '0' + hours
      }
      let minutes = Math.floor((time % 3600) / 60)
      if (minutes < 10) {
        minutes = '0' + minutes
      }
      let seconds = time % 60
      if (seconds < 10) {
        seconds = '0' + seconds
      }
      this.calculateTime = `${days}天${hours}时${minutes}分${seconds}秒`
    },
    recordData () {
      const appId = 'A6046330600069'
      const now = Date.now()
      const appKey = SHA1(appId + 'UZ' + 'C6757733-382B-5724-AF8B-C76DC0BD53AF' + 'UZ' + now) + '.' + now
      this.$http.post('https://d.apicloud.com/mcm/api/Visitor', this.record, { headers: { 'X-APICloud-AppId': appId, 'X-APICloud-AppKey': appKey } }).then(res => {
      }).catch(err => {
        console.log(err)
      })
    },
    getIpData () {
      this.$jsonp(`http://api.map.baidu.com/location/ip?ak=${this.ak}&ip=${window.returnCitySN.cip}&coor=bd09ll`).then(res => {
        this.record.ip = window.returnCitySN.cip
        this.record.province = res.content.address_detail.province
        this.record.city = res.content.address_detail.city
        this.record.pointX = res.content.point.x
        this.record.pointY = res.content.point.y
        this.record.userAgent = navigator.userAgent
        this.$jsonp(`http://api.map.baidu.com/reverse_geocoding/v3/?ak=${this.ak}&output=json&coordtype=wgs84ll&location=${this.record.pointY},${this.record.pointX}`).then(
          res => {
            this.record.location = res.result.formatted_address
            this.recordData()
          }
        )
      }).catch(err => {
        console.log(err)
      })
    },
    toVisitor () {
      this.$router.push('/Visitor')
    }
  }

}

</script>
<style lang="stylus" scoped>
@keyframes starRotate {
  0% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }

  100% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes hideMe {
  to {
    opacity: 0;
    z-index: -10;
  }
}

.home {
  height: 100%;
  background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
  background-attachment: fixed;
  position: relative;
  display: flex;
  justify-content: center;
}

.cover {
  background-color: #75517d;
  width: 100%;
  height: 100%;
  z-index: 100;
  position: absolute;
  animation: hideMe 3s linear forwards;

  path {
    animation: draw 3s linear forwards;
    stroke-dasharray: 6454;
    stroke-dashoffset: 6454;
  }
}

.stars {
  transform: perspective(500px);
  transform-style: preserve-3d;
  position: absolute;
  perspective-origin: 50% 100%;
  left: 50%;
  animation: starRotate 300s infinite linear;
  bottom: 0%;
}

.star {
  width: 2px;
  height: 2px;
  background: #f7f7b8;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
}

.copyright {
  position: absolute;
  bottom: 10px;
  text-decoration: none;
  font-size: 0.5rem;
}

.textAndTime {
  color: white;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;

  .majorText {
    font-size: 1.5rem;
    opacity: 0;
    animation: fadeInDown 1.5s linear 1s 1 normal forwards;
  }

  .calculateTime {
    padding-top: 1.8rem;
    font-size: 2rem;
    opacity: 0;
    animation: fadeIn 1.5s linear 2.5s 1 normal forwards;
  }

  .timeSpan:hover {
    cursor: pointer;
  }
}
</style>
